<template>
  <div class="container">
    <t-tabs style="height: 100%;background-color: transparent;display: flex;flex-direction: column;" :default-value="1">
      <t-tab-panel class="panelInner videoPublish" :value="1" label="发布视频">
        <ul class="videoPublishLeft">
          <li>
            <span class="title">作品描述</span>
            <t-textarea class="textarea" style="background-color: rgb(41, 41, 61);border-radius: 10px"
              v-model="videoForm.title" placeholder="请输入作品简介" name="description" :maxcharacter="50"
              :autosize="{ minRows: 3, maxRows: 5 }" />
          </li>
          <li>
            <span class="title">上传视频</span>
            <t-upload style="margin-top: 10px" v-model="files2" :auto-upload="true" theme="file" :data="{}"
              :onSuccess="handleVideoUploadSuccess" :abridge-name="[10, 8]" draggable
              :headers="{ 'token': userStore.token }" :action="uploadUrl" />
          </li>
          <li style="margin-top: 30px">
            <span class="title">设置封面</span>
            <t-upload style="margin-top: 10px" v-model="files" theme="image" :data="{}" :abridge-name="[10, 8]"
              draggable :onSuccess="handleImgUploadSuccess" :headers="{ 'token': userStore.token }"
              :action="uploadUrl" />
          </li>
          <li style="display: flex;justify-content: center;margin-top: 20px">
            <t-button :loading="isPublish" @click="handlePublish">发布</t-button>
          </li>
        </ul>
        <div style="flex: 1;" class="videoPublishRight">
          <h1 style="color: #c0c0d6;font-weight: bolder;font-size: 26px;margin-bottom: 20px">实机预览</h1>
          <div class="ipadContainer">
            <img style="width: 100%;height: 100%" src="@/assets/ipad.png" alt="">
            <div class="ipadContent">
              <div v-show="videoForm.videoUrl" class="ipad">
                <div class="ipadLeft">
                  <div class="logo-info">
                    <img style="width: 30px" src="https://document-yd.oss-cn-beijing.aliyuncs.com/icon/logo.png"
                      class="avatar" />
                    <span class="logoName">秒映</span>
                  </div>
                  <div v-for="item in navItems" :to="item.path" :class="item.id == 1 ? 'nav-item active' : 'nav-item'">
                    <span class="icon">
                      <svg v-if="item.id == 1" t="1743175101297" class="icon" viewBox="0 0 1221 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="12344" width="200" height="200">
                        <path
                          d="M1204.814491 122.670376l-104.202498-9.819364a18.026592 18.026592 0 0 1-14.655767-11.138382L1048.290907 11.139994a17.880035 17.880035 0 0 0-33.122032 0l-37.079088 90.572636a17.586919 17.586919 0 0 1-14.655767 11.138382l-104.349055 9.819364a18.026592 18.026592 0 0 0-10.11247901 31.363339l78.554907 69.028659a17.733477 17.733477 0 0 1 5.71574901 17.58692L908.91457 337.084236a18.026592 18.026592 0 0 0 26.67349501 19.638727l86.90869299-51.002067a17.586919 17.586919 0 0 1 18.173151 0L1128.751064 357.162636A18.026592 18.026592 0 0 0 1154.69177 337.084236l-23.302668-96.874615a17.733477 17.733477 0 0 1 5.715749-17.58692l78.554907-69.028659a18.319708 18.319708 0 0 0-10.845267-31.363339z"
                          fill="#ffffff" p-id="12345"></path>
                        <path
                          d="M928.699854 224.674509l4.250173-17.147247a18.026592 18.026592 0 0 0-5.715749-17.000689l-74.451293-66.097505a18.026592 18.026592 0 0 0-4.103614 29.311532l78.554907 69.028659a14.655766 14.655766 0 0 1 1.465576 1.90525zM1211.263028 124.575625L1137.104851 190.526573a18.026592 18.026592 0 0 0-5.715749 17.733478l4.103614 17.293804 1.612135-1.758692 78.554907-69.028659a18.319708 18.319708 0 0 0-4.39673-30.190879zM1150.588155 320.376662a17.880035 17.880035 0 0 1-22.56988 3.663942L1040.816466 272.89198a18.319708 18.319708 0 0 0-18.17315 0l-86.908694 51.148624a17.733477 17.733477 0 0 1-22.423322-3.810499L908.91457 337.084236a18.026592 18.026592 0 0 0 26.673495 19.638727l86.908693-51.002067a17.586919 17.586919 0 0 1 18.173151 0L1128.751064 357.162636A18.026592 18.026592 0 0 0 1154.69177 337.084236z"
                          fill="#ffffff" p-id="12346"></path>
                        <path
                          d="M741.82895911 787.73903785a42.501722 42.501722 0 0 0 34.09490072-69.53701592L620.06145625 530.00646075a42.208607 42.208607 0 0 1-6.4251788-42.90361415l87.87986575-210.58005518a41.622376 41.622376 0 0 0-54.61402016-54.61402015l-210.37279157 88.08712935a41.182703 41.182703 0 0 1-42.79998199-6.32154665L205.5337883 148.01921471a41.915491 41.915491 0 0 0-68.50069719 35.13121944l15.44115583 243.43137357a42.062049 42.062049 0 0 1-19.69006432 38.5510728L-65.25641072 585.24227242a42.062049 42.062049 0 0 0 11.29587881 76.37672264l213.99990853 55.44307528c90.26339967 10.46682368 137.6231859-39.38012863 144.46289262-64.251788 7.56513039-28.29151344 1.34721519-49.84695231-18.44648128-56.16849967s-26.84066679-0.93268728-26.84066679-0.93268728a34.734166 34.734166 0 1 1-18.44648127 66.9462184s-46.21983464-10.77771944-31.50410249-63.83726009 72.12781415-45.80530743 82.9055336-42.69635054a83.537868 83.537868 0 0 1 52.02322262 107.77719367c-15.02662792 54.40675655-68.29343359 91.50698271-137.83045021 97.62126575l56.37576327 216.79797108a41.915491 41.915491 0 0 0 76.37672263 11.2958788l121.04207919-197.93696189a41.915491 41.915491 0 0 1 38.44744135-19.79369577z"
                          fill="#ffffff" p-id="12347"></path>
                        <path
                          d="M152.68151054 437.77405436l21.24454312-13.78304488a41.768934 41.768934 0 0 0 19.58643287-38.44744135L178.17496214 142.83761895A8.295164 8.295164 0 0 1 178.17496285 138.0705504 42.355164 42.355164 0 0 0 137.55125118 183.46132991l15.44115512 243.43137286a43.967299 43.967299 0 0 1-0.31089576 10.88135159zM785.45799552 747.01169473l-3.00532545 0.10363215-243.5350043-15.54478799a41.768934 41.768934 0 0 0-38.3438099 19.69006432l-13.16125336 21.65907032a42.64828 42.64828 0 0 1 10.98498374-0.82905512l243.53500431 15.54478799a42.355164 42.355164 0 0 0 43.52540496-40.62371167zM243.35943813 708.35698977a41.622376 41.622376 0 0 0-29.22420071-28.18788199l-227.57568982-59.07019224a41.622376 41.622376 0 0 1-30.26051944-48.91426503l-21.55543888 13.05762191a42.062049 42.062049 0 0 0 11.29587881 76.37672264l213.99990853 55.44307528a173.524272 173.524272 0 0 0 83.32006151-8.70508057zM339.11532932 989.61401246l13.05762121-21.34817527a41.622376 41.622376 0 0 1-48.91426433-30.46778305l-48.39610566-186.43381878a203.275478 203.275478 0 0 1-48.49973712 10.15592722l56.37576327 216.79797108a41.915491 41.915491 0 0 0 76.37672263 11.2958788z"
                          fill="#ffffff" p-id="12348"></path>
                      </svg>
                      <svg v-if="item.id == 2" t="1743175320278" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="18877" width="200" height="200">
                        <path
                          d="M677.2 599.2c69.4-54.7 113.9-139 113.9-233.7 0.1-164.8-134.7-298.4-301-298.4s-301 133.6-301 298.4c0 90.1 40.3 170.8 103.9 225.6C190.8 661.8 128 786 128 919.6c0 11.8 9.5 21.3 21.3 21.3 11.7 0 21.3-9.5 21.4-21.3 0-124.8 60.8-240.3 158.7-301.4 0.1-0.1 0.2-0.1 0.3-0.2 46.4 29.1 101.5 45.9 160.4 45.9 54.4 0 105.3-14.3 149.4-39.3 22.8 15.5 43.8 34.2 62.4 55.8 4.2 4.9 10.1 7.4 16.1 7.4 4.9 0 9.9-1.7 14-5.2 8.9-7.7 9.9-21.2 2.2-30.1C716.9 632.5 697.8 614.7 677.2 599.2zM231.7 365.5c0-141 115.9-255.8 258.4-255.8s258.4 114.7 258.4 255.8S632.6 621.3 490.1 621.3 231.7 506.5 231.7 365.5z"
                          p-id="18878" fill="#ffffff"></path>
                        <path
                          d="M490.1 531.1c-67.1 0-121.7-46.3-121.7-103.3 0-11.8 9.5-21.3 21.3-21.3S411 416 411 427.8c0 33.4 35.5 60.7 79.1 60.7s79.1-27.2 79.1-60.7c0-11.8 9.5-21.3 21.3-21.3s21.3 9.5 21.3 21.3C611.8 484.8 557.2 531.1 490.1 531.1z"
                          p-id="18879" fill="#ffffff"></path>
                        <path d="M745.9 663.9 767.2 770.4 426.2 770.4 447.5 813.1 895.1 813.1Z" p-id="18880"
                          fill="#ffffff"></path>
                        <path d="M873.7 898.3 852.4 855.7 404.9 855.7 554 1004.9 532.7 898.3Z" p-id="18881"
                          fill="#ffffff"></path>
                      </svg>
                      <svg v-if="item.id == 3" t="1743175596657" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="28855" width="200" height="200">
                        <path
                          d="M383.8 464.3c70.1 0 126.7-55.6 126.7-124.2v-41.4c0-68.5-56.8-124.2-126.7-124.2-70.1 0-126.7 55.6-126.7 124.2v41.4c-0.2 68.6 56.6 124.2 126.7 124.2z m316.9 0.2c55.2 0 99.8-45.2 99.8-101v-33.7c0-55.8-44.7-101-99.8-101-55.1 0-99.8 45.2-99.8 101v33.7c-0.1 55.8 44.7 101 99.8 101z m161.6 84c-47.4-19.3-98.8-29.8-152.5-29.8-25.2 0-49.9 2.5-73.8 7 3.8 1.3 7.5 2.5 11.2 3.9 47.6 20.7 80.8 67 80.8 121.2v84.8c49.2-1.3 97.2-7.6 143.5-18.8 21.7-6.9 37.6-28.1 37.6-53.4V625c-0.1-34.3-19.4-63.5-46.8-76.5z m-270.7 27.9C527 550.8 457 536.7 383.8 536.7c-73.1 0-143.1 14.1-207.6 39.6-37.7 17.3-64.2 56.4-64.2 102.2v51c0 33.8 21.5 62.1 51 71.3 71 16.7 144.8 25.9 220.7 25.9 75.7 0 149.5-9 220.4-25.8 29.6-9.1 51.3-37.5 51.3-71.4v-51c0-45.7-26.3-84.6-63.8-102.1z"
                          fill="#ffffff" p-id="28856"></path>
                      </svg>
                      <svg v-if="item.id == 4" style="width: 12px;height: 12px" t="1743311580391" class="icon"
                        viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8780" width="200"
                        height="200">
                        <path
                          d="M232.727273 256c0 139.636364 125.672727 256 279.272727 256s279.272727-116.363636 279.272727-256S665.6 0 512 0 232.727273 116.363636 232.727273 256zM0 875.054545c0 139.636364 158.254545 148.945455 377.018182 148.945455h260.654545c218.763636 0 390.981818-9.309091 390.981818-148.945455 0-162.909091-232.727273-316.509091-512-316.50909C232.727273 558.545455 0 712.145455 0 875.054545z"
                          fill="#ffffff" p-id="8781"></path>
                        <path
                          d="M232.727273 256c0 139.636364 125.672727 256 279.272727 256s279.272727-116.363636 279.272727-256S665.6 0 512 0 232.727273 116.363636 232.727273 256zM0 875.054545c0 139.636364 158.254545 148.945455 377.018182 148.945455h260.654545c218.763636 0 390.981818-9.309091 390.981818-148.945455 0-162.909091-232.727273-316.509091-512-316.50909C232.727273 558.545455 0 712.145455 0 875.054545z"
                          fill="#ffffff" p-id="8782"></path>
                      </svg>
                      <svg v-if="item.id == 5" t="1743175750189" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="31596" width="200" height="200">
                        <path
                          d="M286.1 414.1h0.2-0.2M120.3 453.6h0.3-0.3M909.8 752.5l-0.2-0.4-95.8-126.5V472.4c0-87.6-29.4-160.1-87.3-215.6-46.9-44.9-101.9-67.6-132-77.4v-32.8c0-45.5-37.1-82.6-82.6-82.6-45.6 0-82.6 37.1-82.6 82.6v32.8c-30.1 9.8-85.1 32.4-132 77.4-57.9 55.5-87.3 128-87.3 215.6v153.1l-92.6 121-3.2 5.5-0.2 0.4c-1.2 3.1-11.6 30.6 6.5 57.7 19.1 28.5 59.4 42.4 123.1 42.4h115.8c8 31.2 26.1 57.8 52.6 77 27.4 19.9 62 30.4 99.9 30.4 37.9 0 72.4-10.5 99.9-30.4 26.4-19.2 44.6-45.7 52.6-76.9h115.8c63.7 0 104-13.9 123.1-42.4 18.3-27.3 7.8-54.6 6.5-57.7zM575 891.4c-17.4 10.7-39.2 16.4-63 16.4s-45.5-5.7-63-16.4c-15.5-9.5-27.3-22.9-34.3-38.8h194.6c-7 15.9-18.8 29.3-34.3 38.8z m-93.4-744.8c0-16.8 13.6-30.4 30.4-30.4 16.8 0 30.4 13.6 30.4 30.4v25l-60.8-0.2v-24.8z m-16.8 76.9h94.4c10.6 2.2 61.5 14.3 109.3 50.7 27.4 20.9 49.1 46.1 64.5 75 19 35.5 28.6 77 28.6 123.1v170.8L861.7 774c0.2 2.6-0.5 5.2-2 7.4-12.6 17.6-64 18.9-79.5 18.9H243.7c-61.2 0-76.3-14.5-79.5-18.9-1.5-2.1-2.2-4.7-2-7.3l99.4-130 0.7-0.9V472.4c0-199.6 180.1-244.1 202.5-248.9z"
                          fill="#ffffff" p-id="31597"></path>
                      </svg>
                      <svg t="1743177270080" v-if="item.id == 6" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="34452" width="200" height="200">
                        <path
                          d="M638.24 959.78c-20.29 0-40.18-7.11-56.23-20.57L453.84 831.47 316.06 941.39c-13.51 10.8-32.05 12.81-47.55 5.25-15.52-7.59-25.32-23.41-25.14-40.71l2.51-244.39L127.07 556.8c-21.69-18.21-33.16-46.92-29.91-76.1 3.26-29.21 20.79-54.65 46.89-68.12L800.74 74.06c31.13-16.05 67.38-12.25 94.53 9.84 27.17 22.12 38.21 56.84 28.81 90.59L722.76 895.7c-8.05 28.81-29.93 51.29-58.5 60.12-8.57 2.65-17.34 3.96-26.02 3.96zM454.58 728.83c10.25 0 20.48 3.5 28.81 10.49L637.33 868.7l198.79-712.13-648.47 334.27 132.81 117.07c9.77 8.59 15.3 21.03 15.17 34.04l-1.75 170.68 92.78-74.02a44.674 44.674 0 0 1 27.92-9.78z"
                          fill="#ffffff" p-id="34453"></path>
                        <path
                          d="M460.42 594.64c-11.46 0-22.91-4.37-31.66-13.12-17.49-17.49-17.49-45.84 0-63.31l167.53-167.48c17.49-17.49 45.82-17.49 63.31 0s17.49 45.84 0 63.31L492.07 581.52c-8.74 8.75-20.2 13.12-31.65 13.12z"
                          fill="#ffffff" p-id="34454"></path>
                      </svg>

                      <svg v-if="item.id == 7" t="1743178221644" style="width: 12px;height: 12px;margin-right: 0px"
                        class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        p-id="46232" width="200" height="200">
                        <path
                          d="M576 85.333333c0 18.944-8.234667 35.968-21.333333 47.701334V213.333333h213.333333a128 128 0 0 1 128 128v426.666667a128 128 0 0 1-128 128H256a128 128 0 0 1-128-128V341.333333a128 128 0 0 1 128-128h213.333333V133.034667A64 64 0 1 1 576 85.333333zM0 426.666667h85.333333v256H0v-256z m1024 0h-85.333333v256h85.333333v-256zM384 618.666667a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m320-64a64 64 0 1 0-128 0 64 64 0 0 0 128 0z"
                          fill="#ffffff" p-id="46233"></path>
                      </svg>


                    </span>
                    <span class="label">{{ item.label }}</span>
                  </div>
                </div>
                <div class="ipadRight">
                  <div class="ipadheader">
                    <div style="display: flex;justify-content: center">
                      <t-input placeholder="搜索你感兴趣的内容" style="border-radius: 20px;width: 200px;font-size: 12px;
                        transform: scale(0.8)">
                        <template #suffixIcon>
                          <div style="cursor: pointer">
                            <t-divider layout="vertical" />
                            <search-icon
                              :style="{ cursor: 'pointer', color: 'white', fontSize: '12px', marginRight: '5px' }" />
                            <span style="font-weight: bolder;font-size: 12px">搜索</span>
                          </div>

                        </template>
                      </t-input>
                    </div>
                    <div class="right">
                      <div style="display: flex;">
                        <div class="btn-group">
                          <span>
                            <svg t="1743177653090" class="icon" viewBox="0 0 1024 1024" version="1.1"
                              xmlns="http://www.w3.org/2000/svg" p-id="38994" width="200" height="200">
                              <path
                                d="M364.928 107.52c-27.04-1.824-53.632 3.04-76.928 16.48-31.072 17.92-51.776 48.544-62.88 83.84-11.104 35.2-13.664 75.84-9.6 120.224 0.384 4.48 1.184 9.184 1.728 13.76-4.224 1.792-8.704 3.456-12.8 5.376-40.448 18.656-74.336 41.184-99.328 68.416C80.16 442.88 64 476.096 64 512c0 35.872 16.16 69.12 41.12 96.384 24.96 27.232 58.88 49.76 99.328 68.416 4.096 1.92 8.576 3.584 12.8 5.376-0.544 4.576-1.344 9.28-1.76 13.76-4.032 44.384-1.472 84.992 9.632 120.256 11.104 35.264 31.808 65.856 62.88 83.808 31.072 17.92 67.904 20.576 104 12.576 36.096-8 72.544-26.144 108.928-51.84 3.68-2.56 7.36-5.6 11.072-8.352 3.68 2.752 7.36 5.76 11.072 8.352 36.384 25.696 72.832 43.84 108.928 51.84 36.096 8 72.928 5.376 104-12.576 31.072-17.92 51.776-48.544 62.88-83.84 11.104-35.2 13.664-75.84 9.6-120.224-0.384-4.48-1.184-9.184-1.728-13.76 4.224-1.792 8.704-3.456 12.8-5.376 40.448-18.656 74.336-41.184 99.328-68.416C943.84 581.12 960 547.904 960 512c0-35.872-16.16-69.12-41.12-96.384-24.96-27.232-58.88-49.76-99.328-68.416-4.096-1.92-8.576-3.584-12.8-5.376 0.544-4.576 1.344-9.28 1.76-13.76 4.032-44.384 1.472-84.992-9.632-120.256-11.104-35.264-31.808-65.856-62.88-83.808-31.072-17.92-67.904-20.576-104-12.576-36.096 8-72.544 26.144-108.928 51.84-3.68 2.56-7.36 5.6-11.072 8.352-3.68-2.752-7.36-5.76-11.072-8.352-36.384-25.696-72.832-43.84-108.928-51.84a179.968 179.968 0 0 0-27.072-3.936z m-4.16 63.744c5.44 0.384 11.232 1.28 17.408 2.688 24.192 5.344 53.152 18.912 83.712 40.16a738.048 738.048 0 0 0-74.4 82.336 738.336 738.336 0 0 0-108.352 23.168c-3.136-37.056-0.448-68.928 6.976-92.544 7.648-24.192 19.04-39.04 33.888-47.648 11.136-6.4 24.384-9.408 40.736-8.16z m302.496 0c16.32-1.248 29.6 1.76 40.736 8.16 14.848 8.576 26.24 23.456 33.888 47.648 7.424 23.616 10.112 55.488 6.976 92.544a738.336 738.336 0 0 0-108.352-23.168 738.048 738.048 0 0 0-74.4-82.336c30.56-21.248 59.52-34.816 83.712-40.16 6.176-1.376 11.968-2.304 17.44-2.688zM512 254.688c11.232 10.4 22.464 21.952 33.696 34.048A947.776 947.776 0 0 0 512 288c-11.36 0-22.528 0.352-33.696 0.736 11.2-12.096 22.464-23.648 33.696-34.048zM512 352c30.88 0 60.8 1.824 89.568 4.864A846.688 846.688 0 0 1 650.56 432c15.424 26.72 28.8 53.536 40.576 80a846.624 846.624 0 0 1-40.576 80 846.688 846.688 0 0 1-48.992 75.136c-28.8 3.04-58.688 4.864-89.568 4.864-30.88 0-60.8-1.824-89.568-4.864A846.688 846.688 0 0 1 373.44 592c-15.424-26.72-28.8-53.536-40.576-80 11.744-26.464 25.152-53.28 40.576-80s31.968-51.744 48.992-75.136A846.72 846.72 0 0 1 512 352z m-176.512 19.2c-5.92 9.44-11.808 18.944-17.472 28.8a948.16 948.16 0 0 0-16.192 29.568 627.552 627.552 0 0 1-12.64-46.208c14.624-4.512 30.24-8.512 46.304-12.16z m353.024 0c16.064 3.648 31.68 7.648 46.304 12.16-3.392 14.944-7.776 30.464-12.64 46.208a948.128 948.128 0 0 0-16.192-29.568 948.736 948.736 0 0 0-17.472-28.8zM228.928 406.496c8.192 34.08 19.488 69.44 34.144 105.504a737.824 737.824 0 0 0-34.144 105.504c-33.632-15.84-59.904-34.144-76.608-52.384C135.2 546.432 128 529.152 128 512c0-17.152 7.2-34.432 24.32-53.12 16.704-18.24 42.976-36.544 76.608-52.384z m566.144 0c33.632 15.84 59.904 34.144 76.608 52.384 17.12 18.688 24.32 35.968 24.32 53.12 0 17.152-7.2 34.432-24.32 53.12-16.704 18.24-42.976 36.544-76.608 52.384A737.824 737.824 0 0 0 760.928 512c14.656-36.064 25.952-71.424 34.144-105.504zM512 416c-52.64 0-96 43.36-96 96s43.36 96 96 96 96-43.36 96-96-43.36-96-96-96z m0 64c18.048 0 32 13.952 32 32 0 18.048-13.952 32-32 32-18.048 0-32-13.952-32-32 0-18.048 13.952-32 32-32z m-210.176 114.432c5.216 9.856 10.496 19.712 16.16 29.568 5.696 9.856 11.584 19.36 17.504 28.8-16.064-3.648-31.68-7.648-46.304-12.16 3.392-14.944 7.776-30.464 12.64-46.208z m420.352 0c4.864 15.744 9.28 31.264 12.64 46.208-14.624 4.512-30.24 8.512-46.304 12.16 5.92-9.44 11.808-18.944 17.504-28.8 5.664-9.856 10.944-19.712 16.16-29.568zM279.136 704.384c33.6 9.92 69.856 17.856 108.352 23.168 23.904 30.72 48.96 58.176 74.4 82.336-30.56 21.248-59.52 34.816-83.712 40.16-24.736 5.504-43.328 3.072-58.176-5.472-14.848-8.576-26.24-23.456-33.888-47.648-7.424-23.616-10.112-55.488-6.976-92.544z m465.728 0c3.136 37.056 0.448 68.928-6.976 92.544-7.648 24.192-19.04 39.04-33.888 47.648-14.848 8.544-33.44 10.976-58.176 5.472-24.192-5.344-53.152-18.912-83.712-40.16a738.048 738.048 0 0 0 74.4-82.336 738.336 738.336 0 0 0 108.352-23.168z m-266.56 30.88c11.168 0.384 22.336 0.736 33.696 0.736s22.528-0.352 33.696-0.736c-11.2 12.096-22.464 23.648-33.696 34.048a626.72 626.72 0 0 1-33.696-34.048z"
                                p-id="38995" fill="#ffffff"></path>
                            </svg>
                          </span>
                          <span>关于</span>
                        </div>
                        <div class="btn-group">
                          <span>
                            <svg t="1743177270080" class="icon" viewBox="0 0 1024 1024" version="1.1"
                              xmlns="http://www.w3.org/2000/svg" p-id="34452" width="200" height="200">
                              <path
                                d="M638.24 959.78c-20.29 0-40.18-7.11-56.23-20.57L453.84 831.47 316.06 941.39c-13.51 10.8-32.05 12.81-47.55 5.25-15.52-7.59-25.32-23.41-25.14-40.71l2.51-244.39L127.07 556.8c-21.69-18.21-33.16-46.92-29.91-76.1 3.26-29.21 20.79-54.65 46.89-68.12L800.74 74.06c31.13-16.05 67.38-12.25 94.53 9.84 27.17 22.12 38.21 56.84 28.81 90.59L722.76 895.7c-8.05 28.81-29.93 51.29-58.5 60.12-8.57 2.65-17.34 3.96-26.02 3.96zM454.58 728.83c10.25 0 20.48 3.5 28.81 10.49L637.33 868.7l198.79-712.13-648.47 334.27 132.81 117.07c9.77 8.59 15.3 21.03 15.17 34.04l-1.75 170.68 92.78-74.02a44.674 44.674 0 0 1 27.92-9.78z"
                                fill="#ffffff" p-id="34453"></path>
                              <path
                                d="M460.42 594.64c-11.46 0-22.91-4.37-31.66-13.12-17.49-17.49-17.49-45.84 0-63.31l167.53-167.48c17.49-17.49 45.82-17.49 63.31 0s17.49 45.84 0 63.31L492.07 581.52c-8.74 8.75-20.2 13.12-31.65 13.12z"
                                fill="#ffffff" p-id="34454"></path>
                            </svg>
                          </span>
                          <span>投稿</span>
                        </div>
                      </div>
                      <div v-if="userStore.token">
                        <t-avatar size="small" style="cursor: pointer;" :image="userStore.avatar">
                        </t-avatar>
                      </div>
                      <div v-else>
                        <t-button theme="danger" size="" @click="loginDialogStore.isShow = true">
                          <template #icon>
                            <UserCircleFilledIcon />
                          </template>
                          登录
                        </t-button>
                      </div>

                    </div>
                  </div>
                  <div class="ipadVideo">
                    <div :key="videoObj.videoMessage.videoId" class="video-block">
                      <div class="videoLeft">
                        <div class="video-content fancy-blur-bg">
                          <video @click="handleClickVideo" ref="videoRef" class="video" style="" loop
                            :src="videoObj.videoMessage.url" :preload="videoObj.isNext ? 'metadata' : 'auto'"></video>
                        </div>
                        <div class="videoControl">
                          <div class="progress-bar" ref="progressBarRef" @mousedown="startProgressDrag"
                            @touchstart.passive="startProgressDrag">
                            <div class="progress" :style="{ width: progress + '%' }"></div>
                          </div>
                          <div class="control-bar">
                            <div class="video-detail" style="">
                              <h2 style="margin-bottom: 2px;font-size: 13px;">@{{ videoObj.author.username }}</h2>
                              <p style="font-size: 13px; margin: 0;color: #dcdce8;">{{ videoForm.title }}</p>
                            </div>
                            <div class="left-controls">
                              <button class="play-pause" @click.stop="togglePlay">
                                <span v-if="isPlaying">❚❚</span>
                                <span v-else>▶</span>
                              </button>
                              <span class="time-display">{{ formatTime(currentTime) }} / {{ formatTime(duration)
                              }}</span>
                            </div>
                            <div class="right-controls">
                              <div class="volume-control" @mouseenter="showVolumeSlider = true"
                                @mouseleave="showVolumeSlider = false">
                                <button class="volume-button">
                                  <span v-if="volume > 0.5">🔊</span>
                                  <span v-else-if="volume > 0">🔉</span>
                                  <span v-else>🔇</span>
                                </button>
                                <div class="volume-slider" v-show="showVolumeSlider">
                                  <input type="range" min="0" max="1" step="0.01" v-model="volume" @input="setVolume">
                                </div>
                              </div>
                              <button class="fullscreen-button" @click.stop="toggleFullscreen">
                                <span>⛶</span>
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="videoDialog" :style="{
                        width: videoDialogShow ? '370px' : '0px',
                        padding: videoDialogShow ? '15px' : '0px'
                      }">
                        <div class="videoOperate">
                          <div class="operate">
                            <div class="buttons">
                              <span class="iconContainer" style="margin-bottom: 30px">
                                <img style="width: 50px; border-radius: 50%; overflow: hidden"
                                  :src="videoObj.author.avtarUrl" alt="">
                              </span>
                              <span class="iconContainer">

                                <svg v-if="videoObj.videoMessage.isLiked" t="1743310920891" class="icon"
                                  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4598"
                                  width="200" height="200">
                                  <path
                                    d="M667.786667 117.333333C832.864 117.333333 938.666667 249.706667 938.666667 427.861333c0 138.250667-125.098667 290.506667-371.573334 461.589334a96.768 96.768 0 0 1-110.186666 0C210.432 718.368 85.333333 566.112 85.333333 427.861333 85.333333 249.706667 191.136 117.333333 356.213333 117.333333c59.616 0 100.053333 20.832 155.786667 68.096C567.744 138.176 608.170667 117.333333 667.786667 117.333333z"
                                    fill="#ffffff" p-id="4599"></path>
                                </svg>
                                <svg v-else t="1743310920891" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                  xmlns="http://www.w3.org/2000/svg" p-id="4598" width="200" height="200">
                                  <path
                                    d="M667.786667 117.333333C832.864 117.333333 938.666667 249.706667 938.666667 427.861333c0 138.250667-125.098667 290.506667-371.573334 461.589334a96.768 96.768 0 0 1-110.186666 0C210.432 718.368 85.333333 566.112 85.333333 427.861333 85.333333 249.706667 191.136 117.333333 356.213333 117.333333c59.616 0 100.053333 20.832 155.786667 68.096C567.744 138.176 608.170667 117.333333 667.786667 117.333333z"
                                    fill="#d81e06" p-id="4599"></path>
                                </svg>
                                <span>{{ videoObj.videoMessage.likeNumber }}</span>
                              </span>
                              <span class="iconContainer">
                                <svg class="icon" viewBox="0 0 1024 1024" version="1.1"
                                  xmlns="http://www.w3.org/2000/svg" width="200" height="200">
                                  <path
                                    d="M507.904 60.416q93.184-1.024 175.104 33.792t143.872 94.72 97.792 141.312 36.864 174.592q1.024 88.064-30.208 165.888t-87.04 137.728-131.072 98.816-162.304 48.128q-22.528 3.072-48.128 5.12t-56.832 3.072-69.632 0-86.528-6.144q-106.496-10.24-158.208-26.624t-41.472-18.432q54.272-9.216 93.184-29.696 20.48-11.264 16.896-32.256t-19.968-39.424q-52.224-57.344-84.48-133.632t-34.304-164.352q-1.024-93.184 33.792-175.104t95.232-143.36 142.336-97.28 175.104-36.864zM707.584 510.976q0 26.624 18.432 45.568t45.056 18.944 45.568-18.944 18.944-45.568-18.944-45.056-45.568-18.432-45.056 18.432-18.432 45.056zM450.56 510.976q0 26.624 19.456 46.08t46.08 19.456q27.648 0 46.592-19.456t18.944-46.08q0-27.648-18.944-46.592t-46.592-18.944q-26.624 0-46.08 18.944t-19.456 46.592zM196.608 509.952q0 26.624 18.944 46.08t45.568 19.456q27.648 0 46.592-19.456t18.944-46.08-18.944-45.568-46.592-18.944q-26.624 0-45.568 18.944t-18.944 45.568z"
                                    fill="#ffffff"></path>
                                </svg>
                                <span>{{ videoObj.videoMessage.reviewNumber }}</span>
                              </span>
                              <span class="iconContainer" style="margin-bottom: 40px">
                                <svg v-if="videoObj.videoMessage.isShouCang" t="1743311017436" class="icon"
                                  viewBox="0 0 1092 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5704"
                                  width="200" height="200">
                                  <path
                                    d="M1080.270639 453.733718c-77.161903 88.184889-214.58473 234.425705-214.58473 234.425705s22.045972 160.203798 35.273956 269.70066c5.878993 55.85193-37.478953 80.101899-85.980892 58.054927-92.594883-43.357945-233.690706-110.96686-265.290665-126.399841-32.334959 14.697981-174.165781 81.571897-267.495663 124.928843-49.236938 21.310973-92.594883-2.204997-87.45089-58.054927 12.492984-109.496862 35.273956-268.965661 35.273955-268.965661S91.123885 541.917607 13.227983 453.732718c-27.924965-32.334959-9.551988-77.896902 44.827944-85.980891 111.701859-19.841975 284.397642-51.441935 284.397642-51.441935s94.798881-163.143794 154.324805-263.086669C529.848333-7.7717 552.629304-0.422709 556.304299 1.047289c10.287987 2.939996 26.455967 15.431981 47.032941 52.175934 58.789926 99.943874 152.119808 263.087669 152.119808 263.087669s170.491785 31.60096 280.723647 51.441935c53.645932 8.08399 71.28291 54.380931 44.092944 85.980891z"
                                    fill="#ffffff" p-id="5705"></path>
                                </svg>
                                <svg t="1743311017436" v-else class="icon" viewBox="0 0 1092 1024" version="1.1"
                                  xmlns="http://www.w3.org/2000/svg" p-id="5704" width="200" height="200">
                                  <path
                                    d="M1080.270639 453.733718c-77.161903 88.184889-214.58473 234.425705-214.58473 234.425705s22.045972 160.203798 35.273956 269.70066c5.878993 55.85193-37.478953 80.101899-85.980892 58.054927-92.594883-43.357945-233.690706-110.96686-265.290665-126.399841-32.334959 14.697981-174.165781 81.571897-267.495663 124.928843-49.236938 21.310973-92.594883-2.204997-87.45089-58.054927 12.492984-109.496862 35.273956-268.965661 35.273955-268.965661S91.123885 541.917607 13.227983 453.732718c-27.924965-32.334959-9.551988-77.896902 44.827944-85.980891 111.701859-19.841975 284.397642-51.441935 284.397642-51.441935s94.798881-163.143794 154.324805-263.086669C529.848333-7.7717 552.629304-0.422709 556.304299 1.047289c10.287987 2.939996 26.455967 15.431981 47.032941 52.175934 58.789926 99.943874 152.119808 263.087669 152.119808 263.087669s170.491785 31.60096 280.723647 51.441935c53.645932 8.08399 71.28291 54.380931 44.092944 85.980891z"
                                    fill="#f4ea2a" p-id="5705"></path>
                                </svg>
                                <span>{{ videoObj.videoMessage.shoucangNumber }}</span>
                              </span>
                              <span class="iconContainer">
                                <svg class="icon" viewBox="0 0 1192 1024" version="1.1"
                                  xmlns="http://www.w3.org/2000/svg" width="200" height="200">
                                  <path
                                    d="M785.974088 937.204113l373.988158-381.008413a114.238704 114.238704 0 0 0 0-159.551262L785.974088 14.997819A49.460891 49.460891 0 0 0 702.369227 49.779994v186.674976c-287.192272 0-641.715176 122.216267-702.025554 681.602992a35.101278 35.101278 0 0 0 63.820505 24.570894c191.461514-269.641633 603.103771-236.45497 638.205049-236.45497v196.567155a49.460891 49.460891 0 0 0 83.604861 34.463072zM702.369227 1024"
                                    fill="#ffffff"></path>
                                </svg>
                                <span>{{ videoObj.videoMessage.fenxiangNumber }}</span>
                              </span>
                            </div>
                          </div>
                        </div>
                        <div v-if="!videoDialogShow" class="btn2">
                          <ChevronLeftIcon class="btn2-1" size="20px" />
                        </div>
                      </div>
                    </div>
                    <div class="videoRight">
                      <div style="background-color: rgba(69,69,69,0.8);
                      width: 30px; height: 70px;
                      border-radius: 20px; display: flex;
                      flex-direction: column;
                      align-items: center;
                      justify-content: space-around;
                      transform: scale(0.5)">
                        <svg @click="" class="icon1" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" width="200" height="200">
                          <path
                            d="M480.1 291.4c-0.8 0.6-1.7 1.4-2.5 2.1L82.7 654c-21.5 19.6-23 52.9-3.4 74.4 19.6 21.5 52.9 23 74.4 3.4l359.8-328.3 358.8 328.6c21.4 19.6 54.7 18.2 74.4-3.3 19.6-21.4 18.2-54.7-3.3-74.4L549.1 293.3c-19.6-18-49.1-18.3-69-1.9z"
                            fill="#cdcdcd"></path>
                        </svg>
                        <svg @click="" style="transform: rotateX(180deg);" class="icon1" viewBox="0 0 1024 1024"
                          version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
                          <path
                            d="M480.1 291.4c-0.8 0.6-1.7 1.4-2.5 2.1L82.7 654c-21.5 19.6-23 52.9-3.4 74.4 19.6 21.5 52.9 23 74.4 3.4l359.8-328.3 358.8 328.6c21.4 19.6 54.7 18.2 74.4-3.3 19.6-21.4 18.2-54.7-3.3-74.4L549.1 293.3c-19.6-18-49.1-18.3-69-1.9z"
                            fill="#cdcdcd"></path>
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div class="ipadFoot"></div>
                </div>
              </div>
              <div v-show="!videoForm.videoUrl" class="ipadUpload">
                <h3>请上传视频以供预览</h3>
              </div>
            </div>
          </div>


        </div>
      </t-tab-panel>
      <t-tab-panel disabled class="panelInner videoPublish"
        style="display: flex;align-items: center;justify-content: center;height: 90%;" :value="2" label="发布图文">

        <h1 style="margin: 20px">暂未开放！</h1>


      </t-tab-panel>
    </t-tabs>

  </div>
</template>

<script setup lang="ts">
import { reqAddVideo } from "@/api/video/index.ts";

import { ref, onMounted } from 'vue'
import { ChevronLeftIcon, SearchIcon, UserCircleFilledIcon } from "tdesign-icons-vue-next";
import { useUserStore } from "@/stores/modules/user.js";
import Input from "@/components/Input.vue";
import VideoDialog from "@/components/VideoDialog.vue";
import { MessagePlugin } from "tdesign-vue-next";
import VanillaTilt from 'vanilla-tilt';

const userStore = useUserStore();
const videoForm = ref({
  title: '',
  fengMianUrl: '',
  tags: [''],
  videoUrl: ''
})
const isPublish = ref(false)
// 发布视频
const handlePublish = async () => {
  isPublish.value = true
  if (videoForm.value.videoUrl && videoForm.value.title && videoForm.value.fengMianUrl) {
    const obj = {
      videoTitle: videoForm.value.title,
      fengMian: videoForm.value.fengMianUrl,
      videoUrl: videoForm.value.videoUrl,
    }
    const res = await reqAddVideo(obj)
    if (res.code == 200) {
      MessagePlugin.success({ content: '作品上传成功！通过审核后可正常推荐。' })
      files.value = []
      files2.value = []
      localStorage.removeItem("video")
      videoForm.value = {
        title: '',
        fengMianUrl: '',
        tags: [''],
        videoUrl: ''
      }
    } else {
      MessagePlugin.error({ content: '作品上传失败，请重试！' })
    }

  } else {
    MessagePlugin.error({ content: '请上传视频并填写完整信息！' })
  }
  isPublish.value = false
}


//　视频上传成功时
const handleVideoUploadSuccess = (file) => {
  if (file.response.code === 200) {
    videoForm.value.videoUrl = file.response.data.url;
    if (file.response.data.cover) {
      videoForm.value.fengMianUrl = file.response.data.cover;
      files.value = []
      files.value.push({ url: file.response.data.cover, name: '默认封面图片', status: 'success' })
    }

    videoObj.value.videoMessage.url = file.response.data.url;
    MessagePlugin.success({ content: '上传成功！' })
    localStorage.setItem("video", JSON.stringify(videoForm.value));
  }
}

//　图片上传成功时
const handleImgUploadSuccess = (file) => {
  if (file.response.code === 200) {
    videoForm.value.fengMianUrl = file.response.data.url;
    MessagePlugin.success({ content: '上传成功！' })
    localStorage.setItem("video", JSON.stringify(videoForm.value));
  }
}


const uploadUrl = import.meta.env.VITE_UPLOAD_PATH

const files2 = ref([]);
const files = ref([]);

onMounted(() => {

  VanillaTilt.init(document.querySelector(".ipadContainer"), {
    max: 8,
    speed: 300
  });
  // 获取视频缓存
  const videoJSON = localStorage.getItem("video")
  if (videoJSON) {
    MessagePlugin.success("检测到您上次未提交的作品，已为您找回稿件")
    videoForm.value = JSON.parse(videoJSON)
    if (videoForm.value.fengMianUrl) {
      files.value.push({ url: videoForm.value.fengMianUrl, name: '图片', status: 'success' });
    }
    if (videoForm.value.videoUrl) {
      files2.value.push({ url: videoForm.value.videoUrl, name: '视频.mp4', status: 'success' });
      videoObj.value.videoMessage.url = videoForm.value.videoUrl;
    }
  }


  if (videoRef.value) {
    createVideo()
  }

})
const videoObj = ref({
  id: 1,
  author: {
    username: userStore.nickName,
    userId: '1',
    avtarUrl: ''
  },
  videoMessage: {
    videoId: 1,
    url: '',
    title: videoForm.value.title,
    likeNumber: 888,
    reviewList: [],
    reviewNumber: 999,
    shoucangNumber: 888,
    fenxiangNumber: 888,
    isLiked: 1,
    isShouCang: 1
  },
  isActive: false, // 当前播放标记
  isNext: false,  // 下一个视频标记
})
const navItems = ref([
  { id: 1, isActive: true, path: '/', icon: '🏠', label: '推荐' },
  { id: 2, isActive: false, path: '/guanzhu', icon: '🔍', label: '关注' },
  { id: 3, isActive: false, path: '/friend', icon: '🔍', label: '朋友' },
  { id: 4, isActive: false, path: '/profile', icon: '➕', label: '我的' },
  { id: 5, isActive: false, path: '/messages', icon: '💬', label: '消息' },
  { id: 6, isActive: false, path: '/create', icon: '💬', label: '投稿' },
  { id: 7, isActive: false, path: '/profile', icon: '👤', label: 'Koala' }
]);


const videoDialogShow = ref(false)
const videoRef = ref(null);
const currentVideoRef = ref<HTMLVideoElement | null>(null);
const progressBarRef = ref([]);
const currProgressBarRef = ref<HTMLElement | null>(null);
const isPlaying = ref(false);
const currentTime = ref(0);
const duration = ref(0);
const progress = ref(0);
const volume = ref(0.7);
const showVolumeSlider = ref(false);
const isFullscreen = ref(false);
const isDraggingProgress = ref(false);

const firstFrameFile = ref(null); // 保存首帧的 File 对象

const createVideo = () => {
  const videoRef2 = videoRef.value;
  currentVideoRef.value = videoRef.value
  currProgressBarRef.value = progressBarRef.value
  // 绑定事件
  videoRef2.addEventListener('timeupdate', updateProgress);
  videoRef2.addEventListener('loadedmetadata', () => {
    duration.value = currentVideoRef.value?.duration || 0;
  });
  videoRef2.addEventListener('ended', () => {
    isPlaying.value = false;
  });
  videoRef2.addEventListener('error', (e) => {
    console.error("视频加载错误:", e);
  });
  videoRef2.volume = volume.value;
}

const handleClickVideo = () => {
  togglePlay();
};

const togglePlay = () => {
  if (!currentVideoRef.value) return;
  if (currentVideoRef.value.paused) {
    currentVideoRef.value.play().catch((err) => console.error("播放失败:", err));
    isPlaying.value = true;
  } else {
    currentVideoRef.value.pause();
    isPlaying.value = false;
  }
};

const updateProgress = () => {
  if (!currentVideoRef.value || isDraggingProgress.value) return;
  currentTime.value = currentVideoRef.value.currentTime;
  duration.value = currentVideoRef.value.duration;
  progress.value = (currentTime.value / duration.value) * 100;
};

const formatTime = (time: number) => {
  const minutes = Math.floor(time / 60);
  const seconds = Math.floor(time % 60);
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
};

const setVolume = () => {
  if (!currentVideoRef.value) return;
  currentVideoRef.value.volume = volume.value;
};

const toggleFullscreen = () => {
  if (!currentVideoRef.value) return;
  if (!document.fullscreenElement) {
    currentVideoRef.value.requestFullscreen().catch((err) => {
      console.error(`全屏失败: ${err.message}`);
    });
    isFullscreen.value = true;
  } else {
    document.exitFullscreen();
    isFullscreen.value = false;
  }
};

const startProgressDrag = (e: MouseEvent | TouchEvent) => {
  isDraggingProgress.value = true;
  handleProgressDrag(e);
  document.addEventListener('mousemove', handleProgressDrag);
  document.addEventListener('touchmove', handleProgressDrag);
  document.addEventListener('mouseup', stopProgressDrag);
  document.addEventListener('touchend', stopProgressDrag);
};

const handleProgressDrag = (e: MouseEvent | TouchEvent) => {
  if (!isDraggingProgress.value || !currProgressBarRef.value || !currentVideoRef.value) return;
  const rect = currProgressBarRef.value.getBoundingClientRect();
  let clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
  let percent = (clientX - rect.left) / rect.width;
  percent = Math.max(0, Math.min(1, percent));
  progress.value = percent * 100;
  currentVideoRef.value.currentTime = percent * duration.value;
  currentTime.value = currentVideoRef.value.currentTime;
};

const stopProgressDrag = () => {
  isDraggingProgress.value = false;
  document.removeEventListener('mousemove', handleProgressDrag);
  document.removeEventListener('touchmove', handleProgressDrag);
  document.removeEventListener('mouseup', stopProgressDrag);
  document.removeEventListener('touchend', stopProgressDrag);
};

</script>

<style scoped>
.videoPublishRight {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.btn-group span {
  font-size: 8px;
  height: 13px;
}

.btn-group .icon {
  transition: 0.3s;
  height: 10px !important;
}

.btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 20px;
}

.btn-group:hover .icon {
  transform: translateY(-3px);
}

::v-deep(.t-input, .t-input--suffix) {
  padding: 0 10px;
  border-radius: 10px;
  background-color: rgba(245, 245, 245, 0.1);
  font-size: 10px;
}

.right {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c0c0d6;
}

.ipadFoot {
  height: 30px;

  flex: 0 auto;
}

.ipadVideo {
  display: flex;
  flex: 1;
  height: 20%;
}

.ipadheader {
  flex: 0 auto;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 1px;
  padding-left: 30%;
  box-sizing: border-box;
  padding-right: 10px;
}

.ipadRight {
  display: flex;
  flex-direction: column;
}

@font-face {
  font-family: "阿里妈妈数黑体 Bold";
  font-weight: 700;
  src: url("//at.alicdn.com/wf/webfont/ixfouQjUXvCe/VcRXVZitnVmK.woff2") format("woff2"),
    url("//at.alicdn.com/wf/webfont/ixfouQjUXvCe/uLw83naOEy9a.woff") format("woff");
  font-display: swap;
}

.icon {
  width: 12px;
  height: 12px;
}

.nav-item {
  display: flex;
  justify-content: space-around;
  margin: 12px 0;
  transition: all 0.3s ease;
  color: #c0c0d6;
  text-decoration: none;
  padding: 3px;
  box-sizing: border-box;
  border-left: 3px solid transparent;
  font-family: '阿里妈妈数黑体 Bold', sans-serif;
  cursor: pointer;
}

.nav-item * {
  font-family: '阿里妈妈数黑体 Bold', sans-serif;
}

.nav-item.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.nav-item.active .icon {
  font-size: 12px;
}

.label {
  font-size: 10px;
}

.logo-info {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  font-weight: bolder;
  font-family: '阿里妈妈数黑体 Bold', sans-serif;
}

.logoName {
  font-size: 12px;
  color: white;
}

.ipadLeft {
  width: 12%;
  box-sizing: border-box;
  padding-right: 10px;
  padding-top: 10px;
}

.ipadRight {
  width: 90%;
  height: 100%;
}

.ipadUpload {
  background: linear-gradient(45deg, #1a1a2e, #2a2a4a);
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
  padding-right: 0px;
  padding-bottom: 0;
  padding-top: 0;
}

.ipad {
  background: linear-gradient(45deg, #1a1a2e, #2a2a4a);
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  padding-right: 0px;
  padding-bottom: 0;
  padding-top: 0;
}

.ipadContent {

  position: absolute;
  height: 100%;
  width: 100%;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: 25px;
  border-radius: 5px;
  padding-bottom: 30px;
}

::v-deep(.t-tabs__header .t-is-top) {
  flex: 0 auto;
}

::v-deep(.t-tabs__content) {
  flex: 1;
}

.ipadContainer {
  position: relative;
  width: 687px;
  height: 537px;

}

/*
.ipadContainer {
  position: relative; !* 确保伪元素相对于容器定位 *!
  width: 100%;
  z-index: 2;
  height: 100%;
  padding: 22px;
}
*/

/*.ipadContainer::before {
  content: ""; !* 伪元素必须有content属性 *!
  position: absolute;
  top: -100px;
  left: -40px;
  width: 100%;
  height: 100%;
  background-image: url("@/assets/ipad.png");
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(270deg); !* 旋转45度 *!
  z-index: 1; !* 确保背景图片在内容下方 *!
  transform-origin: center; !* 默认值，可以根据需要调整 *!
}*/

.textarea {
  margin: 10px 0;
}

.videoPublishLeft {
  width: 40%;
  box-sizing: border-box;
  padding: 20px 50px;

}

.title {
  font-weight: bolder;
  color: #c0c0d6;
}

.videoPublishLeft li {}

.videoPublish {
  display: flex;
  height: 100%;
}

::v-deep(.t-tabs__nav-item.t-is-active) {
  color: white;
}


.container {
  width: 100%;
  height: 100%;
  color: #c0c0d6;
}



.videoall {
  position: absolute !important;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
}

::v-deep(.t-list) {
  background: transparent !important;
}

::v-deep(.t-comment__avatar) {
  margin-right: 15px;
}

::v-deep(.t-list--split .t-list-item::after) {
  margin: 15px;
}

.chat-sender {
  flex: 10;
}

.t-iocn {
  cursor: pointer;
}

.reviewContainer {
  height: 100%;
}


::v-deep(.t-comment__avatar-image) {
  width: 40px;
  height: 40px;
}

.reviewList {
  /* 自定义滚动条轨道（背景） */
  scrollbar-color: #c1c1c1 transparent;
  /* Firefox */
  scrollbar-width: thin;
  /* Firefox */
  margin-top: 10px;
  overflow: auto;
  max-height: 55vh;
}



.dialogContent {
  color: rgb(235, 235, 235);
  box-sizing: border-box;
  padding: 10px 4px;
  min-width: 100%;
  height: 100% !important;
}

.videoDialogContainer {
  transition: 0.3s;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.tabs .isActive {
  border-bottom: 3px solid red;
  color: white;
}

.tabs li {
  border-bottom: 3px solid transparent;
  margin-right: 20px;
  padding: 10px 3px;
  font-size: 14px;
  cursor: pointer;
  transition: 0.5s;
}

.videoDialogHeader {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  color: #c0c0d6;
}


.btn2 {
  position: absolute;
  left: -20px;
  z-index: 1;
  background-color: black;
  top: 45%;
  cursor: pointer;
  padding: 10px 5px;
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
  border: 1px solid grey;
  border-right: none;
  transition: 0.3s;
  transform: scale(0.4);
}

.btn2:hover {
  color: white;
  border: 1px solid white;
  border-right: none;
}

.btn2 .btn2-1 {
  color: grey;
}

.btn2:hover .btn2-1 {
  color: white;
}

.videoLeft {
  flex: 20;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  background-color: black;
  align-items: center;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  flex-direction: column;
}

.videoDialog {
  width: 0px;
  height: 100%;
  position: relative;
  transition: 0.3s;
  background-color: rgb(12, 0, 0);
  box-sizing: border-box;
}

.video-block {
  flex: 20;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  background-color: black;
  border-radius: 20px;
  align-items: center;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
}

.icon1 {
  width: 13px;
  height: 13px;
  cursor: pointer;
}

.iconContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
  font-size: 14px;
}

.buttons {
  display: flex;
  flex-direction: column;
  color: white;
}

.operate .icon {
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
  cursor: pointer;
}

.operate {
  height: 60%;
  width: 100%;
  background-color: transparent;
  transform: scale(0.6);
}

.videoOperate {
  height: 100%;
  position: absolute;
  width: 7.5%;
  background-color: transparent;
  left: -30px;
  top: -30px;
  display: flex;
  align-items: center;
}

.videoDetail {
  background-color: transparent;
  height: 100%;
  width: 30px;
  position: absolute;
  right: -10%;
}

.video-content {
  width: 100%;
  height: 92%;
  display: flex;
  position: relative;
  justify-content: center;
}

.video-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background: linear-gradient(135deg, rgba(173, 216, 230, 0.7), rgba(255, 255, 255, 0.7));
  /* 淡蓝和白色 */
  filter: blur(20px);
  transform: scale(1.1);
  /* 放大一点防止边缘看起来锐利 */
}

.video-detail {
  position: absolute;
  color: white;
  top: -500%;
  z-index: 9;
}

.video-feed {
  width: 100%;
  height: 100%;
  display: flex;
  color: #c0c0d6;
  position: relative;
}

.video-container {
  flex: 20;
  width: 100%;
  height: 100%;
  background-color: black;
  border-radius: 20px;
  position: relative;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
}

.video-container::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.video {
  width: 100%;
  object-fit: contain;
  height: 100%;
  z-index: 0;
}

.fancy-blur-bg {
  position: relative;
  overflow: hidden;
}

.fancy-blur-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 30% 30%, rgba(173, 216, 230, 0.5), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.4), transparent 50%),
    linear-gradient(135deg, rgba(135, 206, 250, 0.3), rgba(255, 255, 255, 0.3));
  filter: blur(30px);
  transform: scale(1.2);
  opacity: 0.9;
  pointer-events: none;
}

.videoControl {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: center;
  z-index: 0;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background-color: #555;
  cursor: pointer;
}

.progress {
  height: 100%;
  background-color: white;
  width: 0;
}

.control-bar {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
  align-items: center;
  height: 15px;
  position: relative;
  margin-top: 5px;
  z-index: 9999;
}

.left-controls,
.right-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.play-pause {
  transform: translateY(-10%);
}

.play-pause,
.volume-button,
.fullscreen-button {
  background: none;
  border: none;
  color: white;
  font-size: 12px;
  cursor: pointer;
}

.time-display {
  color: white;
  font-size: 10px;
}

.volume-control {
  position: relative;
}

.volume-slider {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(-40%) rotate(-90deg);
  width: 80px;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px 5px;
  border-radius: 5px;
}

.volume-slider input[type="range"] {
  width: 100%;
}

.videoRight {
  width: 5%;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .video {
    width: 100%;
  }

  .videoControl {
    width: 100%;
  }
}

/* 应用滚动条样式 */
::-webkit-scrollbar-thumb {
  background-color: var(--td-scrollbar-color);
}

::-webkit-scrollbar-thumb:horizontal:hover {
  background-color: var(--td-scrollbar-hover-color);
}

::-webkit-scrollbar-track {
  background-color: var(--td-scroll-track-color);
}
</style>
